import { useState } from "react";
import style from "./index.module.scss";
import bg from "@/assets/images/qixi/main.png";
import Reward from "@/assets/images/qixi/奖励详情.png";
import Rule from "@/assets/images/qixi/规则@2x.png";
import flowerL from "@/assets/images/qixi/花瓣1.png";
import flowerR from "@/assets/images/qixi/花瓣2.png";
import Content from "./content";
// import { closeFun } from './util';
const Index = () => {
  const [showPage, setShowPage] = useState(0);
  const [type, setType] = useState(1); // 1甜蜜来袭 2爱情告白
  return (
    <>
      {showPage !== 1 && (
        <div className={style.container}>
          <img src={bg} alt="背景图" />
          {/* <div
                        className={style.back}
                        onClick={() => closeFun()}
                    ></div> */}
          <div
            className={`${style.btn} ${style.btn1}`}
            onClick={() => setShowPage(1)}
          >
            {/* 奖励 */}
          </div>
          <div
            className={`${style.btn} ${style.btn2}`}
            onClick={() => setShowPage(2)}
          >
            {/* 规则 */}
          </div>
          <p className={style.date}>8月10日-8月17日</p>
          <div className={style.btn_box}>
            <div
              className={`${style.btn_switch}  ${
                type === 1 ? style.btn_left_select : style.btn_left
              }`}
              onClick={() => setType(1)}
            ></div>
            <div
              className={`${style.btn_switch} ${
                type === 2 ? style.btn_right_select : style.btn_right
              } `}
              onClick={() => setType(2)}
            ></div>
          </div>
          {type === 1 && <Content type={1} />}
          {type === 2 && <Content type={2} />}
        </div>
      )}
      {showPage === 1 && (
        <div className={style.questionWrap}>
          <img src={Reward} alt="图片" />
          <div className={style.btn_back} onClick={() => setShowPage(0)}></div>
        </div>
      )}
      {showPage === 2 && (
        <div className={style.questionWrap1}>
          <div className={style.content_box}>
            <img src={Rule} alt="图片" />
            <div className={style.ruleDetail}>
              <p>
                1.本活动时间为8月10日-8月17日，截止到8月17日23:59:59
                <br />
                2.甜蜜来袭排行榜前三名即可获得额外钻石奖励+虚拟道具奖励,（额外奖励需满足最低甜蜜值要求，第一名最低50000甜蜜值;第二名最低25000甜蜜值;第三名最低15000甜蜜值，达不到要求不予发放）
                <br />
                另外参与活动收七夕专属礼物的用户4~50名也可获得对应参与道具奖励
                <br />
                3.爱情告白排行榜点赞数最多的可获得额外钻石奖励+虚拟道具奖励（违规行为点赞取消发放奖励）
                <br />
                4.奖励发放时间将在活动结束后5个工作日发放，若奖励未到账，请请关注微信公众号「pupu找搭子」私聊进行领取
                <br />
                5.最终解释权归PUPU找搭子所有，该活动与苹果公司无关。
                <br />
              </p>
            </div>
            <img className={style.flower_left} src={flowerL} alt="" />
            <img className={style.flower_right} src={flowerR} alt="" />
            <div
              className={style.btn_back_bottom}
              onClick={() => setShowPage(0)}
            ></div>
          </div>
        </div>
      )}
    </>
  );
};

export default Index;
